<script setup>
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { AxiosError } from 'axios';
import { showFailToast, showNotify } from 'vant';
import authService from '@/services/auth.service';

/**
 * 忘记密码页
 * todo: 样式、表单校验完善，变量、方法命名完善
 */
const router = useRouter();
const route = useRoute();

const loading = ref(false);

const entity = ref({});
const active = ref(0);

const load = async () => {
    const routeUsername = route.query.username;
    if (routeUsername) {
        entity.value.username = routeUsername;
    }
};

const nextStep = async () => {
    if (active.value == 0) {
        await checkUsername();
    } else if (active.value == 1) {
        await checkMainInfo();
    } else if (active.value == 2) {
        await resetPassword();
    }
};

const checkUsername = async () => {
    try {
        loading.value = true;
        if (!entity.value.username) {
            showFailToast("请输入用户名");
            return;
        }

        const res = await authService.checkUsernameBeforeResetPassword(entity.value.username);
        if (res.data.data) {
            active.value++;
        } else {
            showFailToast("用户名不存在");
        }
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            showFailToast(msg);
        }
        throw err;
    } finally {
        loading.value = false;
    }
}

const checkMainInfo = async () => {
    try {
        loading.value = true;
        if (!entity.value.phone) {
            showFailToast("请输入手机号");
            return;
        }
        if (!entity.value.realName) {
            showFailToast("请输入真实姓名");
            return;
        }

        const res = await authService.checkMainInfoBeforeReset(entity.value);
        if (res.data.data == true) {
            active.value++;
        } else {
            showFailToast("信息校验不通过");
        }
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            showFailToast(msg);
        }
        throw err;
    } finally {
        loading.value = false;
    }
}

const resetPassword = async () => {
    try {
        loading.value = true;
        if (!entity.value.newPwd) {
            showFailToast("请输入新密码");
            return;
        }
        if (!entity.value.confirmPwd) {
            showFailToast("请输入确认密码");
            return;
        }
        if (entity.value.newPwd != entity.value.confirmPwd) {
            showFailToast("两次密码输入不一致");
            return;
        }

        await authService.resetPassword(entity.value);
        showNotify({ message: "密码重置成功，请重新登录", type: "success" });
        router.push("/login");
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            showFailToast(msg);
        }
        throw err;
    } finally {
        loading.value = false;
    }
}

onMounted(async () => {
    await load();
});
</script>

<template>
    <div class="w-full h-full absolute flex flex-col">
        <VanSteps :active="active">
            <VanStep>步骤一</VanStep>
            <VanStep>步骤二</VanStep>
            <VanStep>步骤三</VanStep>
        </VanSteps>

        <div class="flex-grow flex flex-col justify-center">
            <VanForm>
                <VanCellGroup inset>
                    <template v-if="active == 0">
                        <VanField v-model:model-value="entity.username" name="username" label="用户名" placeholder="用户名">
                        </VanField>
                    </template>
                    <template v-if="active == 1">
                        <VanField v-model:model-value="entity.phone" name="phone" label="手机号" placeholder="手机号">
                        </VanField>
                        <VanField v-model:model-value="entity.realName" name="realName" label="真实姓名" placeholder="真实姓名">
                        </VanField>
                    </template>
                    <template v-if="active == 2">
                        <VanField v-model:model-value="entity.newPwd" type="password" name="password" label="密码"
                            placeholder="密码">
                        </VanField>
                        <VanField v-model:model-value="entity.confirmPwd" type="password" name="confirmPassword"
                            label="确认密码" placeholder="确认密码">
                        </VanField>
                    </template>
                </VanCellGroup>
                <VanCellGroup inset>
                    <VanButton class="mt-2" round block type="primary" @click="nextStep">
                        {{ active < 2 ? '下一步' : '完成' }} </VanButton>
                </VanCellGroup>
            </VanForm>
        </div>
    </div>
</template>